<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h3> 指令 </h3> 
    1. 数据展示型指令  <hr/>
    <p> {{ msg }} </p>
    <p v-html="msg"></p>
    <p v-text="msg"></p>
    区别： 针对xml类型数据: v-html可以解析xml类型数据 <br/>
    <div v-html="xml"></div>
    <div v-text="xml"></div>
  </div>
</body>
<script src="../../lib/vue.global.js"></script>
<script>
  /* 
    总结
      1. 数据展示
        - {{  }}    网络延迟比较严重时，源代码会出现
        - v-html    解析xml类型数据
        - v-text 
        - 工作时的选择
          - 如果解析xml类型数据，选择用  v-html   
          - 如果网络ok，用{{}}
      2. 指令是什么？
         指令其实就是给元素或者组件添加一个自定义属性，只不过这个属性逮有v-标识
  
  */
  Vue.createApp({
    data () {
      return {
        msg: 'hello Vue3',
        xml: '<div> <h5> 你好 </h5> </div>',//标签类型数据
      }
    }
  }).mount('#app')
</script>
</html>